<template>
  <div class='add bc-gray'>
    <div class="baseinfo">
      <van-field label="群组名称" v-model="name" placeholder="请输入群组名称" input-align="right" />
      <van-field label="群组人数" :value="num" readonly input-align="right" />
    </div>
    <div class="teacher-box bc-white">
      <ul class="level_1_box">
        <li v-for="(level1, index1) in teacherData" :key="index1">
          <p>
            <span @click.stop.prevent="hideShow(level1)">{{level1.case}}</span>
            <van-checkbox class="check fr" v-model="level1.selected" shape="box" checked-color="#00998d" @change="changeSelect(level1)"></van-checkbox>
          </p>

          <ul class="level_2_box" v-show="level1.childShow">
            <li v-for="(level2, index2) in level1.list" :key="index2">
              <p>
                <span @click.stop.prevent="hideShow(level2)">{{level2.case}}</span>
                <van-checkbox class="check fr" :key="index2" v-model="level2.selected" shape="box" checked-color="#00998d" @change="changeSelect(level2)"></van-checkbox>
              </p>
              <ul class="level_3_box" v-show="level2.childShow">
                <li v-for="(level3, index3) in level2.list" :key="index3">
                  <p>
                    <van-checkbox class="check" v-model="level3.selected" shape="box" checked-color="#00998d">{{level3.name}}</van-checkbox>
                  </p>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="teacher-box bc-white student-box">
      <ul class="level_1_box">
        <li v-for="(level1, index1) in studentData" :key="index1">
          <p>
            <span @click.stop.prevent="hideShow(level1)">{{level1.case}}</span>
            <van-checkbox class="check fr" v-model="level1.selected" shape="box" checked-color="#00998d" @change="changeSelect(level1)"></van-checkbox>
          </p>

          <ul class="level_2_box" v-show="level1.childShow">
            <li v-for="(level2, index2) in level1.list" :key="index2">
              <p>
                <span @click.stop.prevent="hideShow(level2)">{{level2.grade}}</span>
                <van-checkbox class="check fr" :key="index2" v-model="level2.selected" shape="box" checked-color="#00998d" @change="changeSelect(level2)"></van-checkbox>
              </p>
              <ul class="level_3_box" v-show="level2.childShow">
                <li v-for="(level3, index3) in level2.list" :key="index3">
                  <p>
                    <span @click.stop.prevent="hideShow(level3)">{{level3.class}}</span>
                    <van-checkbox class="check fr" v-model="level3.selected" shape="box" checked-color="#00998d" @change="changeSelect(level3)"></van-checkbox>
                  </p>
                  <ul class="level_4_box" v-show="level3.childShow">
                    <li v-for="(level4, index4) in level3.list" :key="index4">
                      <p>
                        <van-checkbox class="check" v-model="level4.selected" shape="box" checked-color="#00998d">{{level4.name}}</van-checkbox>
                      </p>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="btn-box">
      <van-button type="primary" class="bc-green" @click="save">确定</van-button>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      name:"",
      num:0,
      teacherData:[],
      studentData:[],
    };
  },
  methods: {
    getSelectData(){
      _g.apiPost("message/teacherData",{}).then(res=>{
        this.formaltData(res)
        var teachers=[{case:"全体教师",list:res,selected:false,childShow:false}]
        this.$set(this,"teacherData",teachers)
      })

      _g.apiPost("message/studentData",{}).then(res=>{
        this.formaltData(res)
        var teachers=[{case:"全体学生",list:res,selected:false,childShow:false}]
        this.$set(this,"studentData",teachers)
      })
    },
    /**
     * @name 更改选中状态
     */
    changeSelect(item){
      if(item.list){
        item.list.forEach(ele=>{
          ele.selected=item.selected;
          this.changeSelect(ele)
        })
      }
      this.num=[...new Set([...this.getNumbers([],this.teacherData),...this.getNumbers([],this.studentData)])].length
    },

    formaltData(array){
      array.forEach(ele=>{
        ele.selected=false
        if(ele.list){
          ele.childShow=false
          this.formaltData(ele.list)
        }
      })
    },

    hideShow(item){
      item.childShow=!item.childShow
    },

    /**
     * @name 获取所有的numbers
     */
    getNumbers(numbers=[],array){
      var number=numbers
      array.forEach(ele=>{
        if(ele.list){
         return this.getNumbers(number,ele.list)
        }else if(ele.selected&&!ele.list){
          number.push(ele.number)
        }
      })
      return numbers
    },

    save(){
      var params={
        group:[...new Set([...this.getNumbers([],this.teacherData),...this.getNumbers([],this.studentData)])].join(),
        name:this.name
      }

      _g.apiPost("message/addGroup",params).then(res=>{
        _g.toMessage(res)
        if(res.error===0){
          setTimeout(()=>{
            this.$router.go(-1)
          },600)
        }
      })
    }

  },
  created() {
    this.getSelectData()
  }
};
</script>
<style lang="scss" scoped>
.add {
  height: 100%;
  overflow: auto;

  .baseinfo{
    box-sizing: border-box;
    border: 1px solid #efefef;
  }
  .teacher-box{
    margin-top: 20px;
    padding: 0 20px;
    
    p{
      padding: 15px 10px;
      box-sizing: content-box;
      border-bottom: 1px solid #efefef;
      span{
        line-height: 55px;
      }
    }

    .level_1_box{

      p{
        font-size: 16px;
      }
    }
    .level_2_box{
      p{
        padding-left: 20px;
        font-size: 14px;
      }
      li{position: relative;}
      >li:before{
        position: absolute;
        content: "";
        padding: 10px;
        border-radius: 50%;
        top: 15px;
        left: 5px;
        background-color: #00998d;
      }
    }
    .level_3_box{
      p{
        padding-left: 25px;
        font-size: 12px;

        span{
          line-height: 50px;
        }
      }
    }
  }

  .student-box{

    .level_3_box{
      li{position: relative;}
      >li:before{
        position: absolute;
        content: "";
        padding: 7px;
        border-radius: 50%;
        top: 15px;
        left: 10px;
        background-color: #00998d;
      }
    }
  }

  .btn-box{
    width: calc(100% - 120px);
    margin: 40px auto;

    .bc-green{
      width: 100%;
    }
  }
}
</style>